<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,mail=yes">
   <title>Index</title>

   <script src="./js/jquery-1.8.3.min.js"></script>
   <script src="./js/swiper.min.js"></script>
   <link rel="stylesheet" href="./layui/css/layui.css">
   <link rel="stylesheet" href="./css/iconfont.css">
   <link rel="stylesheet" href="./css/animate.css">
   <link rel="stylesheet" href="./css/swiper.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/index.css">
   <script src="./js/wow.min.js"></script>
   <script type="text/javascript" src="./js/clipboard.min.js"></script>
   <script type="text/javascript" src="./layui/layui.js"></script>
</head>

<body>
   <header class="headerpage " data-load="header"></header>
   <main class="user_page  ">
      <section class="">
         <div class="layui-main">
            <div class="user_con">
               <div class="user_headpage" data-load="user_active_header"></div>
               <div class="right_main ">

                  <p class="ft24 mb10 ft-bold">參加名單 - werwe</p>
                  <p class="ft14 gary_c9 mb20 ft-bold"></p>
                  <div class="block_com" style="min-height: 70vh;">
                     <ul class="layui-form layui-row layui-col-space40 ul_height">
                        <li class="layui-col-md6 layui-col-xs12">
                           <div class="item">
                              <div class="layui-form-item">
                                 <div class="layui-input-wrap">
                                    <input type="text" class="layui-input" placeholder="订单编号、票号、票种、姓名、手机、Email">
                                    <div class="layui-input-suffix">
                                       <i class="layui-icon layui-icon-search"></i>
                                    </div>
                                 </div>
                              </div>
                              <div class="layui-form-item">
                                 <div class="d-flex jc-s">
                                    <div class="mr20 flex-1">
                                       <select>
                                          <option>所有分组</option>
                                       </select>
                                    </div>
                                    <select>
                                       <option>每页50</option>
                                    </select>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="layui-col-md6 layui-col-xs12">
                           <div class="item d-flex jc-fe al-fe">
                              <a class="mr10" href="user_active_par_list_down.html">
                                 <button class=" layui-btn layui-bg-orange ">汇出名单</button>
                              </a>
                              <button data-dialog="ticket" class=" layui-btn layui-bg-orange ">设定验票通知</button>
                           </div>
                        </li>
                     </ul>
                     <p class="gary_c9 ft-bold ft12 mt40 mb12">
                        *為保護消費者個資安全，未完成報名或消費者自行取消訂票，將遮蔽部份個人資訊；若消費者對於訂單有疑慮，可以透過訂購人姓名和信箱與
                     </p>
                     <div class="flex-center mb30">
                        <ul class="ul_height ticket_ul1">
                           <li>
                              <a class="item layui-this" href="">有效票/已付款(0)</a>
                           </li>
                           <li>
                              <a class="item" href="">有效票/已付款(0) </a>
                           </li>
                           <li>
                              <a class="item" href="">有效票/已付款(0)</a>
                           </li>
                           <li>
                              <a class="item" href="">有效票/已付款(0)</a>
                           </li>
                           <li>
                              <a class="item" href="">有效票/已付款(0)</a>
                           </li>
                        </ul>
                     </div>
                     <div class="ticket_ul2 uapl_table">
                        <table class="layui-table" lay-skin="nob">

                           <thead>
                              <tr>
                                 <th>功能</th>
                                 <th>參加人姓名</th>
                                 <th>參加人Email</th>
                                 <th>參加人電話</th>
                                 <th>價錢</th>
                                 <th>票種</th>
                                 <th>狀態</th>
                                 <th>建立時間</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td>werwe</td>
                                 <td>werwe</td>
                                 <td>werwe</td>
                                 <td>werwe</td>
                                 <td>werwe</td>
                                 <td>werwe</td>
                                 <td>werwe</td>
                                 <td>werwe</td>
                              </tr>
                           </tbody>
                        </table>
                     </div>


                  </div>
               </div>
            </div>
         </div>
      </section>
   </main>
   <div class="layui-hide">
      <div class="ticket_dia ">
         <p class="ft-bold ft24 t1">設定驗票通知</p>
         <div class="block">
            <p class="ft14 gary_c9 ft-bold mb20">驗票通知是 ACCUPASS 獨創的強大功能，凡是進場的民眾掃描 ACCUPASS 電子票後，系統會自動顯示特定的訊息在手機或</p>
            <form class="layui-form" onsubmit="return false" lay-filter="demo-val-filter">
               <div class="layui-form-item">
                  <div class="label ">1、應用範圍</div>
                  <div class="">
                     <select>
                        <option>所有票券</option>
                     </select>
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="label ">2、序號</div>
                  <div class="d-flex al-c flex-wrap">
                     <p class="mr20">起始</p>
                     <div class="label_pl">
                        <div class="item">所有票券</div>
                     </div>
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="label ">3、顯示模板</div>
                  <div class="d-flex">
                     <input name="name1" class="layui-input" placeholder="自定文字" style="width: 1.5rem;">
                     <input name="name2" class="layui-input flex-1 ml10 mr10" placeholder="我的票券">
                     <button data-btn="add_pl" class="layui-btn layui-btn-primary layui-border-orange layui-btn-lg"><i
                           class="layui-icon  layui-icon-add-circle-fine mr5"></i>新增</button>
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="label ">示範:</div>
                  <div class="add_pl_block">

                  </div>
               </div>
            </form>

         </div>
         <div class="b2">
            <button class="layui-btn layui-btn-primary layui-border" data-close>取消</button>
            <button class="layui-btn layui-btn-primary layui-border-orange" data-close>设定</button>
         </div>
      </div>
   </div>
</body>
<script src="./js/index.js"></script>
<script>
   var addhtml = $('.ticket_dia')[0].outerHTML;
   $(document).on('click', '[data-dialog="ticket"]', function () {
      layui.use(function () {
         var upload = layui.upload;
         var layer = layui.layer;
         var element = layui.element;
         var $ = layui.$;
         var form = layui.form;

         layer.open({
            type: 1, // page 层类型
            area: ['900px', '65%'],
            title: false,
            shade: 0.6, // 遮罩透明度
            closeBtn: 0,
            shadeClose: true, // 点击遮罩区域，关闭弹层
            anim: 0, // 0-6 的动画形式，-1 不开启
            content: addhtml,
            success: function () {
               // 对弹层中的表单进行初始化渲染
               form.render();
               // 表单提交事件
               form.on('submit(demo-login)', function (data) {
                  var field = data.field; // 获取表单字段值
                  // 显示填写结果，仅作演示用
                  layer.alert(JSON.stringify(field), {
                     title: '当前填写的字段值'
                  });
                  // 此处可执行 Ajax 等操作
                  // …
                  return false; // 阻止默认 form 跳转
               });
            }
         });
         var form = layui.form;
      })

   })
   $(document).on('click', '[data-close]', function () {
      layer.closeAll()
   }).on('click', '[data-btn="add_pl"]', function () {

      // 表单取值
      layui.use(function () {
         var form = layui.form;
         var data = form.val('demo-val-filter');
         if (data.name1 == '' && data.name2 == '') {
            return
         }
         $('<div class="item1">' + data.name1 + ' ' + data.name2 + '<div data-btn="clear">清除</div></div>').appendTo($(document).find('.add_pl_block'))
         form.val('demo-val-filter', {
            name1: '',
            name2: ''
         })
      })

   }).on('click', '[data-btn="clear"]', function () {
      $(this).closest('.item1').removeClass()
   })


</script>

</html>